<template>
  <div class="app-container">
    <h4 class="form-header h4">基本信息</h4>
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="8" :offset="2">
          <el-form-item label="爬虫源" prop="nickName">
            <el-input v-model="form.sourceName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="状态" prop="userName">
            <el-input  v-model="form.sourceStatus?'默认使用':'非默认使用'" disabled />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <h4 class="form-header h4">爬虫规则</h4>
    <el-input
      type="textarea"
      :autosize="{ minRows: 2, maxRows: 20}"
      placeholder="请输入内容"
      v-model="form.crawlRule">
    </el-input>
    <div style="margin-top: 20px; float: right">
      <el-button type="info" plain style="margin-left: 20px" @click="drawer=true">例子</el-button>
      <el-button type="primary" plain @click="submitRule">提交</el-button>
    </div>

<!--    &lt;!&ndash;爬虫源示例和规则&ndash;&gt;
    <el-drawer
      title="我是标题"
      :visible.sync="false"

      :before-close="handleClose">
      <span>我来啦!</span>
    </el-drawer>-->

    <el-drawer title="爬虫源示例与规则说明" :visible.sync="drawer" size="50%" >
      <div style="padding: 0px 20px 0px 20px">
        <h3 style="color: #ff4949">
          在爬取小说网站规则的制定是，在需要用到爬取网站的小说id、章节id、关键字时，分别使用{bookId}、{indexId}、{keyword}指代，
          同时，在规则中，所有的匹配的正则表达式必须是正则表达式中的第一位
        </h3>
        <item :name="exampleSourceKey.crawlUrl" :value="exampleSource.crawlUrl" :introduce="exampleSourceIntroduce.crawlUrl"/>
        <item :name="exampleSourceKey.searchHref" :value="exampleSource.searchHref" :introduce="exampleSourceIntroduce.searchHref"/>
        <item :name="exampleSourceKey.bookHref" :value="exampleSource.bookHref" :introduce="exampleSourceIntroduce.bookHref" />
        <item :name="exampleSourceKey.bookContentHref" :value="exampleSource.bookContentHref" :introduce="exampleSourceIntroduce.bookContentHref" />
        <item :name="exampleSourceKey.indexPattern" :value="exampleSource.indexPattern"  :introduce="exampleSourceIntroduce.indexPattern"/>
        <item :name="exampleSourceKey.bookContentPattern" :value="exampleSource.bookContentPattern" :introduce="exampleSourceIntroduce.bookContentPattern" />
        <item :name="exampleSourceKey.bookImgPattern" :value="exampleSource.bookImgPattern" :introduce="exampleSourceIntroduce.bookImgPattern" />
        <item :name="exampleSourceKey.bookCategoryPattern" :value="exampleSource.bookCategoryPattern" :introduce="exampleSourceIntroduce.bookCategoryPattern" />
        <item :name="exampleSourceKey.bookDescPattern" :value="exampleSource.bookDescPattern"  :introduce="exampleSourceIntroduce.bookDescPattern"/>
        <item :name="exampleSourceKey.bookAuthorPattern" :value="exampleSource.bookAuthorPattern" :introduce="exampleSourceIntroduce.bookAuthorPattern" />
        <item :name="exampleSourceKey.bookNamePattern" :value="exampleSource.bookNamePattern"  :introduce="exampleSourceIntroduce.bookNamePattern"/>
        <item :name="exampleSourceKey.bookStatusPattern" :value="exampleSource.bookStatusPattern" :introduce="exampleSourceIntroduce.bookStatusPattern" />
        <item :name="exampleSourceKey.searchListGroupPattern" :value="exampleSource.searchListGroupPattern" :introduce="exampleSourceIntroduce.searchListGroupPattern" />
        <item :name="exampleSourceKey.searchHrefPattern" :value="exampleSource.searchHrefPattern" :introduce="exampleSourceIntroduce.searchHrefPattern" />
        <item :name="exampleSourceKey.searchImgPattern" :value="exampleSource.searchImgPattern" :introduce="exampleSourceIntroduce.searchImgPattern" />
        <item :name="exampleSourceKey.searchBookNamePattern" :value="exampleSource.searchBookNamePattern" :introduce="exampleSourceIntroduce.searchBookNamePattern" />
        <item :name="exampleSourceKey.searchAuthorNamePattern" :value="exampleSource.searchAuthorNamePattern" :introduce="exampleSourceIntroduce.searchAuthorNamePattern"  />
        <item :name="exampleSourceKey.searchDescPattern" :value="exampleSource.searchDescPattern" :introduce="exampleSourceIntroduce.searchDescPattern" />
      </div>
    </el-drawer>


    <!--    <select-user ref="select" :bookId="queryParams.bookId" @ok="handleQuery" />-->
  </div>
</template>

<script>
import {currentCategory,unaddCategory,updateCategory} from "@/api/sys/novel";
import {getCrawlAndRule,updateOrAddCrawlRule} from "@/api/sys/crawl";
import exampleSource from "@/assets/json/exampleSource.json"
import exampleSourceKey from "@/assets/json/exampleSourceKey.json"
import exampleSourceIntroduce from "@/assets/json/exampleSourceIntroduce.json"
import Item from "@/components/CrawlSource/Item"

export default {
  name: "rule",
  dicts: ['sys_normal_disable'],
  components: {
    Item
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中用户组
      userIds: [],
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,

      exampleSource:exampleSource,

      exampleSourceKey:exampleSourceKey,

      exampleSourceIntroduce:exampleSourceIntroduce,

      //是否打开抽屉
      drawer:false,
      // 总条数
      total: 0,
      // 用户表格数据
      crawlAndRule: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        crawlSourceId: undefined,
      },
      form:{
        id:'',
        sourceName:'',
        sourceStatus:'',
        crawlRule: '',
      }
    };
  },
  created() {
    const crawlId = this.$route.params.crawlId;
    if (crawlId) {
      this.queryParams.crawlId = crawlId;
      this.queryParams.crawlSourceId = crawlId
      this.getList();
    }
  },
  methods: {
    /** 查询授权用户列表 */
    myIndex(index){
      return index+1
    },
    getList() {
      this.loading = true;
      getCrawlAndRule(this.queryParams.crawlSourceId).then(response => {
        this.crawlAndRule = response.data;
        this.form.sourceName=this.crawlAndRule.sourceName
        this.form.sourceStatus = this.crawlAndRule.sourceStatus
        this.form.id = this.crawlAndRule.id
        this.form.crawlRule=(this.crawlAndRule==null||this.crawlAndRule.crawlRule==null)?'':JSON.stringify(this.crawlAndRule.crawlRule,null,4)
          //this.total = response.data.total;
        this.loading = false;
        }
      );
    },
    // 返回按钮
    handleClose() {
      const obj = { path: "/system/role" };
      this.$tab.closeOpenPage(obj);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.userIds = selection.map(item => item.userId)
      this.multiple = !selection.length
    },
    /** 打开授权用户表弹窗 */
    openSelectUser() {
      this.$refs.select.show();
    },
    formatter(row){
      if (row.workDirection){
        return '女频'
      }else {
        return '男频'
      }
    },
    updateCategory(row){
      const query ={}
      query.id=this.form.bookId||undefined
      query.catId=row.id||undefined
      query.catName=row.name||undefined
      updateCategory(query).then(response=>{
        this.getList()
      })
    },
    submitRule(){
      updateOrAddCrawlRule(this.form).then(response=>{
        this.$message.success("更新成功")
        this.getList()
      })
    }
  }
};
</script>
